<template>
  <view>
    <view class="search">
      <u-search
        class="left"
        placeholder="请输入关键字"
        @change="selectparams"
        :bgColor="searchstyle"
        :borderColor="borderstyle"
        :showAction="false"
        v-model="keyword"
      ></u-search>
      <view class="backtop">
        <u-button
          type="primary"
          @click="topback"
          class="custom-style"
          :plain="true"
          size="mini"
          text="刷新"
        >
        </u-button>
      </view>
    </view>
    <u-sticky offset-top="105">
      <view class="btngroup">
        <view class="datebtn">
          <u-button
            type="primary"
            @click="selectdate"
            :plain="true"
            :hairline="true"
            size="mini"
            text="日期筛选"
          ></u-button>
        </view>
      </view>
    </u-sticky>

    <view class="section">
      <u-cell-group v-if="empty == 'notempty'">
        <u-swipe-action :autoClose="true">
          <u-list
            :upperThreshold="100"
            :pagingEnabled="true"
            :preLoadScreen="page * 4"
            @scrolltolower="scrolltolower"
          >
            <u-list-item v-for="item in list" :key="item.id">
              <u-swipe-action-item
                @click="action"
                :disabled="this.auth.id == '1' ? true : false"
                :options="options"
                :name="item.id"
              >
                <u-cell
                  @click="info(item.id)"
                  :label="
                    '门店 : ' +
                    item.store.name +
                    '  车辆 : ' +
                    item.hirename_text +
                    '  车型 : ' +
                    item.carpark.cartype +
                    '  评价时间 :' +
                    item.createtime_text
                  "
                  :key="item.id"
                  center
                >
                  <view slot="title" class="u-slot-title">
                    <text class="u-cell-text"
                      >评价人: {{ item.business.nickname }}</text
                    >
                    <u-rate v-model="item.rate" readonly></u-rate>
                  </view>
                </u-cell>
              </u-swipe-action-item>
            </u-list-item>

            <u-loadmore
              :status="flag"
              :loading-text="loadingText"
              :loadmore-text="loadmoreText"
              :nomore-text="nomoreText"
            />
          </u-list>
        </u-swipe-action>
      </u-cell-group>
    </view>

    <view v-if="empty == 'isempty'" class="list">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>

    <!-- 筛选 -->
    <u-picker
      :show="filtershow"
      ref="uPicker"
      :columns="columns"
      @confirm="confirmfilter"
      @cancel="cancelfilter"
      @change="changeHandler"
    ></u-picker>

    <u-calendar
      :mode="'range'"
      :monthNum="24"
      :minDate="lastYeardate"
      :maxDate="nextYeardate"
      :show="showdate"
      @close="closedate"
      @confirm="confirmdate"
      startText="选择开始"
      endText="选择结束"
      confirmDisabledText="请选择查询审批时间段"
      :formatter="formatter"
    />
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <u-modal
      :show="show"
      @confirm="destroy"
      @cancel="cancel"
      showCancelButton
      title="是否销毁该评论"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>
    <u-modal
      :show="show1"
      @confirm="destroys"
      @cancel="cancel1"
      showCancelButton
      title="是否销毁全部评论"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();
    this.commentindex();
  },

  created() {
    this.timer = setInterval(() => {
      this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      count: {},
	  showdate:false,
      filtershow: false,

      star: 5,
      flag: "loadmore",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      status: 0,
      show: false,
      show1: false,
      auth: {},
      list: [],
      page: 1,
      searchstyle: "#ffffff",
      borderstyle: "#eee",
      comid: 0,
      empty: "",
      total1: 0,
      total2: 0,
      btnStyle: {
        width: "52px",
        margin: "5% 80%",
        height: "25px",
      },
      options: [
        {
          ststus: 0,
          text: "全部销毁",
          style: {
            backgroundColor: "#c71435",
          },
        },
        {
          ststus: 1,
          text: "销毁",
          style: {
            backgroundColor: "#2d286c",
          },
        },
      ],
    };
  },
  methods: {
	closedate() {
			this.showdate = false
		},
    selectdate(e) {
      this.showdate = true;
    },
    topback() {
      uni.reLaunch({
        url: "/pages/business/feedback/index",
      });
    },
    action(item) {
      if (item.index == 0) {
        this.show1 = true;
      }
      if (item.index == 1) {
        this.show = true;

        this.comid = item.name;
      }
    },
    scrolltolower() {
      this.commentindex();
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index]);
      }
    },
    shaixuan() {
      this.filtershow = true;
    },
    confirmfilter(e) {
      this.storeName = e.value[0];
      this.typeName = e.value[1];
      this.Filter({
        typeName: this.typeName,
        storeName: this.storeName,
      });
      this.filtershow = false;
    },
    cancelfilter(e) {
      this.filtershow = false;
    },

    async destroy() {
      this.show = false;
      let data = {
        adminid: this.auth.id,
        comid: this.comid,
      };

      let result = await this.$u.api.business.destroycomment(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
        });
        setTimeout(() => {
          this.commentindex();
        }, 450);
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    async destroys() {
      this.show = false;
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.business.destroyall(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1200,
          complete: () => {
            this.$u.route("/pages/business/feedback/index", {
              comid: this.comid,
            });
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },
    cancel1() {
      this.show1 = false;
    },

    async commentindex(e) {
      if (e) {
        this.status = e;
      }

      let data = {
        stoid: this.auth.stoid,
        adminid: this.auth.id,
        status: this.status,
        keyword: this.keyword,
        page: this.page,
      };

      let result = await this.$u.api.business.commentindex(data);

      if (result.code) {
        if (Array.isArray(result.data.list) && result.data.list.length > 0) {
          this.empty = "notempty";

          this.list = this.list.concat(result.data.list);
          this.page++;
        } else {
          this.empty = "isempty";

          this.page = 1;
        }
      }
    },

    info(e) {
      //订单详情
      this.$u.route("/pages/business/feedback/info", {
        comid: e,
      });
    },
  },
};
</script>

<style lang="scss">
.datebtn {
  text-align: center;
  width: 100px;
  height: 25px;
}

.section {
  margin-top: 120px;
}

.search {
  width: 80%;
  position: fixed;
  top: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 7%;
  z-index: 999;
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

// .u-rate.data-v-01de4127 {
//   width: 110px;
//   float: right;
//   padding-top: 20px;
// }

.btngroup {
  width: 100%;
  display: flex;
  position: fixed;
  left: 0px;
  top: 80px;
  justify-content: space-around;
}

.u-cell__label {
  width: 241px;
}
.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}
.u-cell__body {
  position: relative;
}

.recordBox {
  height: 100%;
  padding: 0 40rpx;

  .recordItem {
    margin-top: 20rpx;
    background-color: #ffffff;

    .title {
      height: 66rpx;
      padding: 0 20rpx;
      line-height: 66rpx;
      background: #e1e1e1;
      font-size: 32rpx;
      color: #141414;
      text-align: center;
    }

    .contentList {
      display: flex;
      flex-direction: column;
      font-size: 28rpx;
      color: #6d6d6d;

      .contentItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #c1c1c1;
        height: 66rpx;
        padding: 0 20rpx;
        line-height: 66rpx;
      }
    }

    .showDetail {
      color: #548afb;
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
